<template>
	<div>

		<el-table :data="tableData" border style="width: 100%" show-overflow-tooltip @cell-click="cellClick2"
			:row-style="{ height: '50px' }" :cell-style="{ padding: '0px' }">
			<el-table-column type="index" fixed></el-table-column>
			<el-table-column prop="id" label="code" sortable fixed width="100">
			</el-table-column>
			<el-table-column prop="name" label="名称" sortable fixed width="100">
				<!-- 给表格内容添加icon -->
				<template #default="scope">
					<div>
						<el-icon>
							<timer />
						</el-icon>
						{{ scope.row.name }}
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="id" label="名称33" sortable fixed width="100" align="center">
				<template #default="{ row, column }">
					<div class="custom-cell">
						{{ row.id }}
						<!-- 将角标替换为 el-badge 组件 -->
						<div class="badgeTopRight">
							<el-badge v-if="row[column.no]?.topRight" :value="row[column.no]?.topRight.value"
								:type="row[column.no]?.topRight.type"></el-badge>
						</div>

						<div class="badgeBottomRight">
							<el-badge v-if="row[column.no]?.bottomRight" :value="row[column.no]?.bottomRight.value"
								:type="row[column.no]?.bottomRight.type"></el-badge>
						</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="id" label="名称33" sortable fixed width="100" align="center">
				<template #default="{ row, column }">
					<div class="custom-cell">
						{{ row.id }}
						<!-- 将角标替换为 el-badge 组件 -->
						<div class="badgeTopRight">
							<el-badge v-if="row[column.no]?.topRight" :value="row[column.no]?.topRight.value"
								:type="row[column.no]?.topRight.type"></el-badge>
						</div>

						<div class="badgeBottomRight">
							<el-badge v-if="row[column.no]?.bottomRight" :value="row[column.no]?.bottomRight.value"
								:type="row[column.no]?.bottomRight.type"></el-badge>
						</div>
					</div>
				</template>
			</el-table-column>
		</el-table>

		<el-dialog v-model="dialogFormVisible" title="添加标记">
			<el-form :model="form">
				<el-form-item label="???" :label-width="formLabelWidth">
					<el-input-number v-model="form.current" :disabled="true" />
				</el-form-item>
				<el-form-item label="上限" :label-width="formLabelWidth">
					<el-input-number v-model="form.topRight" :precision="3" :step="0.5" />
				</el-form-item>
				<el-form-item label="下限" :label-width="formLabelWidth">
					<el-input-number v-model="form.bottomRight" :precision="3" :step="0.5" />
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button type="primary" @click="confirm"> 确认 </el-button>
					<el-button type="primary" @click="cancel"> 取消 </el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script >

export default {
	data() {
		return {
			dialogFormVisible: false,
			formLabelWidth: '140px',
			currentRow: {},
			currentColumn: {},
			form: {
				current: '',
				topRight: '0.000',
				bottomRight: '0.000',
			},
			tableData: [],
		}
	},
	mounted() {
		this.data().then(data => this.tableData = data);
	},
	methods: {
		cancel() {
			this.dialogFormVisible = false
			this.form = {};
		},
		confirm() {
			var row = this.currentRow;
			var column = this.currentColumn;
			this.dialogFormVisible = false
			// 这里可以发送接口同后端交互
			console.log('cc  submit!', this.form)
			if (this.form.topRight == '' && this.form.bottomRight == '') {
				console.log("cellClick2 cell 没有填写数据");
				return;
			}
			//实时填充数据到Storage
			var maps1 = new Map();
			// 从sessionStorage获取并还原成Map对象
			const storedJsonString = sessionStorage.getItem(row.id);
			if (storedJsonString) {
				const parsedData = JSON.parse(storedJsonString);
				// 根据数组元素重新构造Map对象
				maps1 = new Map(parsedData);
				console.log(maps1);
			}
			var pp = column.property;
			// 处理右上角标
			var topRight = {
				type: '',
				value: ''
			}
			if (this.form.topRight != '') {
				topRight.value = this.form.topRight;
				//处理type逻辑
				if (pp == 'id') { //处理id列
					//没有走拦截器时处理badge type
					if (parseFloat(topRight.value) > parseFloat(row.id)) {
						topRight.type = 'danger';
					} else {
						topRight.type = 'success';
					}
				}
			}
			//处理右下角标
			var bottomRight = {
				type: '',
				value: ''
			}
			if (this.form.bottomRight != '') {
				bottomRight.value = this.form.bottomRight;
				//处理type逻辑
				if (pp == 'id') { //处理id列
					//没有走拦截器时处理badge type
					if (parseFloat(bottomRight.value) > parseFloat(row.id)) {
						bottomRight.type = 'success';
					} else {
						bottomRight.type = 'danger';
					}
				}
			}
			var badgeObj = {
				columnProperty: '',
				topRight: {},
				bottomRight: {}
			};
			badgeObj.columnProperty = pp;
			badgeObj.topRight = topRight;
			badgeObj.bottomRight = bottomRight;

			// 放到map存储至sessionStorage
			maps1.set(column.no, badgeObj);
			sessionStorage.setItem(row.id, JSON.stringify(Array.from(maps1)));
			//console.log("cellClick2 cell 存储到放到map存储至sessionStorage ", badgeObj);

			//变更行数据,塞到table中
			row[column.no] = badgeObj;
			const index = this.tableData.findIndex(item => item.id === row.id);
			if (index !== -1) {
				this.tableData[index] = row;
			}

			console.log("cellClick2 cell this.tableData 变更", this.tableData);
			this.form = {};
			this.currentRow = {};
			this.currentColumn = {};
		},
		cellClick2(row, column, cell, event) {
			//console.log("cellClick2 row", row);
			//console.log("cellClick2 column", column);
			// console.log("cellClick2 cell", cell);
			//赋值当前行/所在列属性数据到form
			this.form.current = row[column.property];
			this.currentRow = row;
			this.currentColumn = column;

			var bdage = row[column.no];
			//console.log("cellClick2 bdage", bdage);
			this.form.topRight = bdage?.topRight?.value;
			this.form.bottomRight = bdage?.bottomRight?.value;
			//console.log("cellClick2 form", this.form);
			// 打开对话框
			this.dialogFormVisible = true

		},
		cellClick(row, column, cell, event) {
			// console.log("cellClick row", row);
			// console.log("cellClick column", column);
			// console.log("cellClick cell", cell);

			// https://element-plus.org/zh-CN/component/message-box.html#%E6%8F%90%E4%BA%A4%E5%86%85%E5%AE%B9
			ElementPlus.ElMessageBox.prompt('请输入标记', 'Tip', {
				center: true,
				confirmButtonText: 'OK',
				cancelButtonText: 'Cancel'
			}).then(({ value }) => {
				row[column.no] = value;

				var maps1 = new Map();

				// 从sessionStorage获取并还原成Map对象
				const storedJsonString = sessionStorage.getItem(row.id);
				if (storedJsonString) {
					const parsedData = JSON.parse(storedJsonString);
					// 根据数组元素重新构造Map对象
					maps1 = new Map(parsedData);

					console.log(maps1);
				} else {
					console.log("没有存储的Map数据");
				}
				maps1.set(column.no, value);
				console.log(" axios stringify maps1", maps1);

				sessionStorage.setItem(row.id, JSON.stringify(Array.from(maps1)));


			})
		},
		contextmenu(row, column, cell, event) {
			console.log("contextmenu");
		},
		data() {

			const options = { method: 'GET', url: 'http://localhost:9099/json' };
			axios.interceptors.response.use(function (response) { // 放置业务逻辑代码 //
				console.log(" axios response 拦截器", response);
				var data = response.data
				data.forEach(d => {
					// console.log(" axios response data", d);
					// 从sessionStorage获取并还原成Map对象
					const storedJsonString = sessionStorage.getItem(d.id);
					if (storedJsonString) {
						const parsedData = JSON.parse(storedJsonString);
						// 根据数组元素重新构造Map对象
						const maps1 = new Map(parsedData);

						maps1.forEach((v, k) => {
							//处理一次最新type逻辑

							//赋值到k及'$列索引'字段上
							d[k] = v;
						})

						console.log(d.id, "存储的Map数据处理到data中", d);
					} else {
						console.log(d.id, "没有存储的Map数据");
					}
				});
				return response;
			});
			return new Promise((resolve, reject) => {
				axios.request(options).then(function (response) {
					console.log(response.data);
					return resolve(response.data);
				}).catch(function (error) {
					console.error(error);
				});
			});


		}
	}
}

</script>

<style scoped>
.item {
	position: absolute;
}

::v-deep .el-table .cell {
	/* 改变原生element plus cell设置的样式不生效 */
	overflow: visible !important;
}

.custom-cell {
	position: relative;
	height: 100%;
	min-height: 30px;
}

.badgeTopRight {
	position: absolute;
	top: -20%;
	left: 60%;
}

.badgeBottomRight {
	position: absolute;
	bottom: -40%;
	left: 60%;
}
</style>